<template>
  <div style="width:98%;margin:0 20px">

    <el-container>
      <el-header class="header">
        <el-page-header content="作业范围" @back="goBack" />
        <el-button v-if="judge" style="background-color:#e15536;color:white;height:40px;margin-right:50px" @click="judge=false">编辑</el-button>
        <div v-else-if="!judge" style="margin-right:50px">
          <el-button style="background-color:#e15536;color:white;height:40px" @click="judge=true">提交</el-button>
          <el-button style="background-color:#e15536;color:white;height:40px" @click="judge=true">取消</el-button>
        </div>

      </el-header>
      <el-main class="main">
        <label>地区关键词：<input v-model="keyword" placeholder="请输入地区关键词" style="width:300px;height:50px;margin:20px 0"></label>
        <div v-if="!judge">
          <button v-if="judge1" style="background-color:#e15536;color:white;height:40px;border:none" @click="edit">开始绘制</button>
          <div v-if="!judge1">
            <button style="background-color:#e15536;color:white;height:40px;border:none;margin-right:10px" @click="finished">完成绘制</button>
            <button style="background-color:#e15536;color:white;height:40px;border:none" @click="finished">删除围栏</button>
          </div>
        </div>
        <div style="text-align:center;line-height:40px;background-color:#fff5e7;color:#c67e12">当前区域营业部下暂无作业范围</div>
        <br>
        <baidu-map class="bm-view" :center="center" :zoom="10" :scroll-wheel-zoom="true">
          <bm-local-search :auto-viewport="true" :keyword="keyword" />
          <bm-polygon :path="polygonPath" stroke-color="blue" fill-color="#f2c8c5" :stroke-opacity="1" :stroke-weight="1" stroke-style="dashed" :editing="editing" />
        </baidu-map>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getBusinessScope } from '@/api/manager'
// 封装修改属性名的函数
function batchRenameProperties(arr, oldPropertyNames, newPropertyNames) {
  return arr.map(obj => {
    const updatedObj = {}

    for (let i = 0; i < oldPropertyNames.length; i++) {
      const oldPropName = oldPropertyNames[i]
      const newPropName = newPropertyNames[i]

      // eslint-disable-next-line no-prototype-builtins
      if (obj.hasOwnProperty(oldPropName)) {
        updatedObj[newPropName] = obj[oldPropName]
      } else {
        updatedObj[oldPropName] = obj[oldPropName]
      }
    }

    return updatedObj
  })
}
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      keyword: '',
      judge: true,
      judge1: true,
      editing: false,
      polygonPath: []
    }
  },
  async created() {
    const result = await getBusinessScope(this.$route.params.id, 2)
    console.log(result)
    this.center.lng = result.longitude
    this.center.lat = result.latitude
    this.polygonPath = result.polygon
    console.log(this.polygonPath)
    const oldPropertyNames = ['latitude', 'longitude']
    const newPropertyNames = ['lat', 'lng']
    this.polygonPath = batchRenameProperties(this.polygonPath, oldPropertyNames, newPropertyNames)
    console.log(this.polygonPath)
    console.log(this.center)
  },
  methods: {
    edit() {
      this.judge1 = false
      this.editing = true
    },
    finished() {
      this.judge1 = true
      this.editing = false
    },
    goBack() {
      this.$router.push('/worManagement')
    }
  }
}
</script>

<style scoped>
.header{
  background-color: #f8faff;
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
}
.main{
  background-color: #fff;
}
.bm-view{
  width: 98%;
  height: 600px;
  margin-left:20px ;
}
</style>
